<!--
*** Created by zhumin on 2023/02/12.***
*** Description: "首页"
-->
<template>
  <div class="page-home">
    <page-top></page-top>
    <div class="home-content">
      <div class="left-icon">
        <div class="icon-fencing" @click="gotoSelectMatch()"></div>
        <div class="text">选择比赛</div>
      </div>
      <div class="right-icon">
        <div class="icon-code" @click="scanCode()"></div>
        <div class="text">扫描二维码</div>
      </div>
      <el-dialog
        title="扫描二维码"
        :visible.sync="showCamera"
        width="520px "
        :close-on-click-modal="false"
        :modal="false"
      >
        <qrcode @getScanResult="getScanResult" v-if="showCamera"></qrcode>
      </el-dialog>
    </div>
    <page-bottom></page-bottom>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import Util from '@/assets/js/util'
import Storage from '@/assets/js/storage'
import qrcode from '@/components/qrcode.vue'
import TmqClient from '@/assets/js/mqClient'
export default {
  created() {},
  mounted() {
    // this.test = new TmqClient()
    // this.test.mqttMsg()
    // console.log(this.test.msgData)
    // this.test.client.on('message', (topic, message) => {
    //   console.log('收到来自', topic, '的消息---->>', message.toString())
    //   this.msgData = message.toString()
    // })
  },
  data() {
    return {
      showCamera: false,
      test: null,
      msgData: ''
    }
  },
  watch: {},
  computed: {
    ...mapState({})
  },
  filters: {},
  components: {
    qrcode
  },
  methods: {
    //选择比赛-跳转至选择比赛界面
    gotoSelectMatch() {
      this.$router.push({
        path: '/selectMatch'
      })
    },

    //扫描二维码
    scanCode() {
      this.$nextTick(_ => {
        this.showCamera = true
      })
    },

    //获取二维码中的结果
    getScanResult(res) {
      console.log(res)
      this.showCamera = false
    }
  }
}
</script>
<style scoped lang="less">
@import '@/assets/less/home.less';
</style>
